<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
    <el-breadcrumb-item :to="{ path: '/homeIndex' }">
      <i class="el-icon-s-promotion"></i> 后台管理
    </el-breadcrumb-item>
    <el-breadcrumb-item>费用列表</el-breadcrumb-item>
  </el-breadcrumb>

  <el-divider></el-divider>
  <div style="margin-top: 20px; margin-bottom: 20px;">
      <el-col :span="24">
        <!-- 放搜索条件 
        :inline="ture"让表单元素占一行,一行不够会换行-->
        <el-form :inline="true">
          <el-form-item label="老人姓名">
            <el-input v-model="orderParam.olderName" placeholder="老人姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="clear">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loadFinanceList">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </div>
  <el-card style="float: left ;width: 100%;height: 100%">
    <el-divider content-position="left">费用表格</el-divider>
    <!--    添加事件的按钮-->


    <!-- 事件列表   -->
    <el-table :data="this.financeArr" border style="width: 100%">

      <el-table-column type="index" label="编号" align="center" width="50"></el-table-column>
      <el-table-column prop="olderName" label="老人姓名" style="width: 6px" align="center"></el-table-column>
      <el-table-column prop="foodMoney" label="每日套餐费" header-align="center" align="right"></el-table-column>
      <el-table-column prop="gmtCreate" :formatter="row => formatDate(row.gmtCreate)" label="开始订餐时间" header-align="center" align="right"></el-table-column>
      <el-table-column prop="createTime" :formatter="row => formatDate(row.createTime)" label="扣费明细时间" header-align="center" align="right"></el-table-column>
      <el-table-column prop="resultMoney" label="扣款前金额" header-align="center" align="right">
      <template slot-scope="{ row }">
        <span>￥{{ row.resultMoney.toFixed(2) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="remainingBalance" label="扣款后剩余" header-align="center" align="right">
      <template slot-scope="{ row }">
        <span>￥{{ row.remainingBalance.toFixed(2) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="info"
              icon="el-icon-delete"
              @click="openDeleteLinkConfirm(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
    </el-table>
    <div class="block" style>
        <el-pagination
          background
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          :current-page="pageNum"
          layout="total, sizes, prev, pager, next"
          @next-click="nextPage"
          @prev-click="prevPage"
          @size-change="sizeChange"
          @current-change="currentPage"
          :total="total"
        ></el-pagination>
      </div>
  </el-card>






</div>
</template>

<script>
export default {
  name: "FoodListView",
  data: function () {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      financeArr: [],

      orderParam: {
        olderName: "",
      
      },
    }
  },
  methods: {
    clear() {
      this.orderParam.olderName = "";
    
    },

     //分页1
     prevPage(val) {
      //点击上一页触发
      this.pageNum = val;
      this.loadFinanceList();
    },
    nextPage(val) {
      //点击下一页触发
      this.pageNum = val;
      this.loadFinanceList();
    },
    sizeChange(val) {
      //val每一页条数
      this.pageNum = 1;
      this.pageSize = val;
      this.loadFinanceList();
    },
    currentPage(val) {
      this.pageNum = val;
      this.loadFinanceList();
    },
    queryCondition() {
      this.pageNum = 1;
      this.loadFinanceList();
    },

    loadFinanceList(){
     //带分页参数pageNum,pageSize
     let pageParam = {};
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      pageParam.param = this.orderParam;
      this.$axios.post("api/foodMoney/queryFoodMoney", pageParam).then(res => {
        if (res.data.code == 200) {
          let pageData = res.data.data;

          this.financeArr = pageData.list;
   
          //给分页参数赋值
          this.total = pageData.total;
          this.pageNum = pageData.pageNum;
          this.pageSize = pageData.pageSize;
        }
      });
    },
    openDeleteLinkConfirm(val) {
      let message = "此操作将永久删除";
      this.$confirm(message, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.handleDeleteLink(val);
        })
        .catch(() => {});
    },
    handleDeleteLink(val) {
      //餐品删除方法
      console.log(val); // 在这里打印val
      this.$confirm("再次确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$axios.get("api/foodMoney/deleteFoodMoney/" + val).then(res => {
          if (res.data.code == 200) {
            //发删除请求
            this.$message.success("删除成功!");
            this.loadFinanceList();
          }
        });
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    formatDate(date) {
      if (!date) return null;

      return new Date(date).toISOString().substr(0, 10); // 日期格式化为 YYYY-MM-DD
    }


  },
  mounted() {
    this.loadFinanceList();

  }




}
</script>

<style scoped>

</style>